<template>
  <PageWrapper>
    <a-card>
      <div style="margin-bottom: 20px; padding: 20px">
        <a-form :model="formState">
          <a-row :gutter="[20, 20]">
            <a-col :xs="24" :sm="6">
              <a-form-item :label="t('sys.account.columns.username')">
                <a-input allowClear :placeholder="t('sys.configuration.pleaseenter') + t('sys.account.columns.username')" v-model:value="formState.value6" />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="6">
              <a-form-item :label="t('sys.errorLog.tableColumnDate')">
                <a-range-picker v-model:value="formState.value2" show-time />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="6">
              <a-space>
                <a-button :icon="h(SearchOutlined)" type="primary"> {{ t('sys.form.placeholder.inquire') }} </a-button>
                <a-button> {{ t('sys.login.forget')  }} </a-button>
                <a-button @clcik="deleteCick" :icon="h(DeleteOutlined)" type="primary" danger
                  > {{ t('sys.configuration.delete') }} </a-button
                >
                <a-button @clcik="deleteAllCick" :icon="h(DeleteOutlined)" type="primary" danger
                  > {{ t('sys.configuration.deleteAll') }} </a-button
                >
              </a-space>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <a-table
        @change="handleTableChange"
        :pagination="pagination"
        :row-selection="rowSelection"
        :loading="loading"
        bordered
        rowKey="id"
        :showExpandColumn="false"
        :scroll="{ x: 1500 }"
        :columns="operationLogColumns"
        :dataSource="operationLogdataSource"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'action'">
            <a-button @click="detailsClick(record)" type="link"> {{ t('sys.configuration.particulars') }} </a-button>
            <a-popconfirm :title="t('sys.configuration.IsDelete')" :ok-text="t('sys.configuration.comfig')" :cancel-text="t('sys.configuration.cancel')">
              <a-button danger type="link"> {{ t('sys.configuration.delete') }} </a-button>
            </a-popconfirm>
          </template>
        </template>
      </a-table>
    </a-card>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { ref, onMounted, h, Ref, UnwrapRef } from 'vue';
  import { SearchOutlined, DeleteOutlined } from '@ant-design/icons-vue';
  import { PageWrapper } from '@/components/Page';
  import { operationLogColumns } from './account.data';
  import { useI18n } from '@/hooks/web/useI18n';

  const { t } = useI18n();
  const pagination = ref({
    total: 0,
    current: 1,
    pageSize: 10,
  });

  const handleTableChange = (e) => {
    pagination.value = e;
    init();
  };
  const deleteCick = () => {};
  const deleteAllCick = () => {};
  const selectedRowKeyslist: Ref<UnwrapRef<(string | number)[]>> = ref<(string | number)[]>([]);
  const rowSelection = ref({
    checkStrictly: false,
    onChange: (selectedRowKeys: (string | number)[], selectedRows: any) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      selectedRowKeyslist.value = selectedRowKeys;
    },
    onSelect: (record: any, selected: boolean, selectedRows: any) => {
      console.log(record, selected, selectedRows);
    },
    onSelectAll: (selected: boolean, selectedRows: any, changeRows: any) => {
      console.log(selected, selectedRows, changeRows);
    },
  });
  const ModalShow = ref(false);
  const detailsRecord = ref({});
  const detailsClick = (record) => {
    ModalShow.value = true;
    detailsRecord.value = record;
  };
  const formState = ref({});
  const operationLogdataSource = ref([
    {
      id: 1,
      name: 'fasdfiennskf12321',
      userAction: '任务下发',
      reamk: '对设备12352333,进行重启',
      cread_time: '2025-11-1',
    },
    {
      id: 2,
      name: 'fasdfiennskf12321',
      userAction: '配置变更',
      reamk: '对设备12352333,脚本1修改为脚本2',
      cread_time: '2025-11-1',
    },
    {
      id: 3,
      name: 'fasdfiennskf12321',
      userAction: '设备重启',
      reamk: '对设备12352333,进行重启',
      cread_time: '2025-11-1',
    },
  ]);
  const loading = ref(true);
  const init = () => {
    loading.value = false;
  };
  onMounted(() => {
    init();
  });
</script>
<style scoped lang="scss">
  .status-label {
    width: 100px;
  }
</style>
